<template>
  <div>
    <!--1. vant标题组件   NavBar -->
    <van-nav-bar :title="$route.meta.title" fixed />

    <!-- 一级路由 挂载点 一般写在 App.vue 中 -->
    <router-view></router-view>

    <!--2. vant底部标签栏   Tabbar  -->
    <van-tabbar route>
      <van-tabbar-item replace to="/layout/home" icon="home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/layout/search" icon="search"
        >搜索</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      changeRoute: "首页",
    };
  },
  //监听路由信息的变化
  watch: {
    $route() {
      console.log(this.$route);
      this.changeRoute = this.$route.meta.title;
    },
  },
};
</script>

<style></style>
